/**
 * Created by Administrator on 2017-04-16 016.
 */
$(function () {
    var a = 0; //当前图片
    var b = 0; //上一张图片
    $('.btn ul li').click(function () {
        //siblings取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
        $(this).addClass('bj').siblings().removeClass('bj');
            a = $(this).index();
            //向右走
            if ( a > b) {
                $('.pic ul li').eq(a).css('left','100%');
                $('.pic ul li').eq(a).animate({left:'0px'},300);
                $('.pic ul li').eq(b).animate({left:'-100%'},300);
                b = a;
            }
            //向左走
            if ( a < b) {
                $('.pic ul li').eq(a).css('left','-100%');
                $('.pic ul li').eq(a).animate({left:'0px'},300);
                $('.pic ul li').eq(b).animate({left:'100%'},300);
                b = a;
            }
        })
    $('.prve').on('click',prev);
    $('.next').on('click',next);
    function prev() {
        a--;
        if ( a < 0) {
            a = 3;
        }
        $('.pic ul li').eq(a).css('left','-100%');
        $('.pic ul li').eq(a).animate({left:'0px'},300);
        $('.pic ul li').eq(b).animate({left:'100%'},300);
        b = a;
        $('.btn ul li').addClass('bj').eq(a).siblings().removeClass('bj');
    }
    function next() {
        a++;
        if ( a > 3) {
            a = 0;
        }
        $('.pic ul li').eq(a).css('left','100%');
        $('.pic ul li').eq(a).animate({left:'0px'},300);
        $('.pic ul li').eq(b).animate({left:'-100%'},300);
        b = a;
        $('.btn ul li').addClass('bj').eq(a).siblings().removeClass('bj');
    }
    var time = setInterval(next,3000);
    $('.main').hover(function () {
        clearInterval(time);
    },function () {
        time = setInterval(next,3000);
    })
})